.ph-tooltip-self{
  --ph-tooltip-bg:#363636;
  &:after,
  &:before{
      top:0;
      left:50%;
      margin:auto;
      position:absolute;
      display: none;
  }
  &:before{
      content: attr(data-title);
      background-color: var(--ph-tooltip-bg);
      box-shadow: 0 0.234px 0.0937px 0 rgb(0 0 0 / 15%);
      border-radius: 4px;
      padding: var(--ph-10) var(--ph-15);
      transform: translate(-50%,calc(-100% - 4px));
      color: var( --ph-c-light);
      font-size: var(--ph-fs-small);
      text-align: center;
      width: auto;
  }
  &:after{
      content:"";
      width:0;
      height:0;
      flex:0 0 auto;
      border: 5px solid transparent;
      border-top-color: var(--ph-tooltip-bg);
      border-bottom: none;
      transform: translate(-50%,-100%);
  }
  &:hover:before,
  &:hover:after{
      display: block;
  }
}
.ph-tooltip{
	display: none;
	position: absolute;
	color: #f1f1f1;
	top: 0;
	left: 50%;
	z-index: 99999;
	font-size: var(--ph-fs-small);
	line-height: 1;
	word-wrap: break-word;
	--ph-tooltip-bg:#363636;
  &-text{
    background-color: var(--ph-tooltip-bg);
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 15%);
    border-radius: 4px;
    padding: var(--ph-10) var(--ph-15);
  }
	&-arrow{
    position:relative;
    width:0;
    height:0;
    flex:0 0 auto;
    border: 5px solid transparent;
	}
  &-t,&-b,
  &-l,&-r,
  &-lt,&-rt,
  &-lb,&-rb{
    display: flex;
    align-items: center;
    opacity: 0;
  }
  &-t,&-b,
  &-lb,&-rb,
  &-lt,&-rt{
    flex-direction: column;
  }
  
  &-t{
    transform: translate(-50%,-100%);
    .ph-tooltip-arrow{
      border-bottom: none;
      border-top-color: var(--ph-tooltip-bg);
    }
  }
  &-b{
    transform: translate(-50%,0%);
    flex-direction: column-reverse;
    .ph-tooltip-arrow{
      border-top: none;
      border-bottom-color: var(--ph-tooltip-bg);
    }
  }
  &-l{
    transform: translate(-100%,-50%);
    .ph-tooltip-arrow{
      border-right: none;
      border-left-color: var(--ph-tooltip-bg);
    }
  }
  &-r{
    transform: translate(0%,-50%);
    flex-direction: row-reverse;
    .ph-tooltip-arrow{
      border-left: none;
      border-right-color: var(--ph-tooltip-bg);
    }
  }
  &-lt{
    transform: translate(0,-100%);
    .ph-tooltip-arrow{
      border-bottom: none;
      border-top-color: var(--ph-tooltip-bg);
      align-self: flex-start;
      margin-left: var(--ph-10);
    }
  }
  &-rt{
    transform: translate(-100%,-100%);
    .ph-tooltip-arrow{
      border-bottom: none;
      border-top-color: var(--ph-tooltip-bg);
      align-self: flex-end;
      margin-right: var(--ph-10);
    }
  }
  &-lb{
    transform: translate(0%,0%);
    flex-direction: column-reverse;
    .ph-tooltip-arrow{
      border-top: none;
      border-bottom-color: var(--ph-tooltip-bg);
      align-self: flex-start;
      margin-left: var(--ph-10);
    }
  }
  &-rb{
    transform: translate(-100%,0%);
    flex-direction: column-reverse;
    .ph-tooltip-arrow{
      border-top: none;
      border-bottom-color: var(--ph-tooltip-bg);
      align-self: flex-end;
      margin-right: var(--ph-10);
    }
  }
}